<template>
    <div>
        <button @click="show = !show">切换</button>
        <transition name="fade">
            <div class="box" v-show="show">123</div>
        </transition>
        <transition>
            <p v-show="show">你好VUE</p>
        </transition>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true)
</script>

<style  scoped>
.box {
    width: 200px;
    height: 100px;
    background-color: aquamarine;
}

/* 下面我们会解释这些 class 是做什么的 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
/* .v-enter-active{ */
/* animation: guidian 0.5s linear; */
/* } */
/* .v-leave-active{ */
/* animation: guidian 1s linear reverse; */
/* } */
/* @keyframes guidian { */
/* from{transform: translateX(-100%);} */
/* to{transform: translateY(0px);} */
/* 0%{transform: scale(0);}
    50%{transform: scale(1.5);}
    100%{transform: scale(1);}

} */</style>